<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			perspective: 1000px;
		}
		.container{
			width: 200px;
			height: 200px;
			margin: 100px auto;
			border: 1px solid gray;
			background: url('images/dog2.jpg') no-repeat center/cover;
			position: relative;

			/* transform样式 */
			transform-style: preserve-3d;
		}
		.item{
			position: absolute;
			width: 100%;
			height: 100%;
			background: url('images/dog.gif') no-repeat center /cover;
		}
		.item:nth-child(1){
			transform: rotateY(0deg) translateZ(300px);
		}
		.item:nth-child(2){
			transform: rotateY(60deg) translateZ(300px);
		}
		.item:nth-child(3){
			transform: rotateY(120deg) translateZ(300px);
		}
		.item:nth-child(4){
			transform: rotateY(180deg) translateZ(300px);
		}
		.item:nth-child(5){
			transform: rotateY(240deg) translateZ(300px);
		}
		.item:nth-child(6){
			transform: rotateY(300deg) translateZ(300px);
		}

		/* 设置动画 */
		@keyframes autoRotate{
			from{}
			to{
				transform: rotateY(360deg);
			}
		}

		.animation{
			animation: autoRotate 3s linear infinite;
		}

		/* 鼠标悬停的时候 停止动画 */
		.container:hover{
			/* 动画状态
				如果要使用js操作该属性
				dom.style.animationPlayState ='paused'
			 */
			/* animation-play-state: paused; */
			animation: haha ;
		}
	</style>
</head>
<body>
	<div class="container animation">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
</body>
</html>